<template>
    <flexbox justify="space-between" class="header-info-wrap">
        <div style="flex: 1">
            <flexbox style="padding-top: 16px">
                <img src="@/assets/images/chanxianIcon.png" style="width: 24px" />
                <span class="header-title font-w-b margin-l-8">【{{ detail.parentCatalogCode === '2202303080042' ? '技术中台' : $filters.valToNameFilter('fromSystem', detail.systemId) }}】 {{ typeTitle }}需求管理与产研分析报告</span>
                <a-tag color="blue" class="margin-l-8" v-if="detail.parentCatalogCode === '2202303080042'"> 产品 </a-tag>
                <a-tag color="blue" class="margin-l-8" v-else> 子产品 </a-tag>
            </flexbox>
            <a-form layout="inline" labelAlign="left">
                <a-row>
                    <a-col :span="24">
                        <a-row :gutter="6">
                            <a-col :span="5">
                                <a-form-item label="产品经理">
                                    <div v-fitText style="margin-top: -2px; width: 100%">{{ detail.productManager }}</div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item label="负责人">
                                    <div v-fitText style="margin-top: -2px; width: 100%">{{ detail.requireManager }}</div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item label="平均交付周期">
                                    <div v-fitText style="margin-top: -2px; width: 100%">{{ detail.onlineAvgDays }}</div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item label="缺陷率">
                                    <div v-fitText style="margin-top: -2px; width: 100%">{{ detail.faultRate }}</div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="统计周期">
                                    <div v-fitText style="margin-top: -2px; width: 100%">{{ $route.query.startTime }}~{{ $route.query.endTime }}</div>
                                </a-form-item>
                            </a-col>

                            <a-col :span="5">
                                <a-form-item label="全生命周期管理阶段">
                                    <div v-fitText style="margin-top: -2px; width: 100%">{{ detail.isOutsideSystem === '0' ? '全生命周期' : '需求研发、需求测试' }}</div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item label="管理平台">
                                    <div v-fitText style="margin-top: -2px; width: 100%">{{ detail.isOutsideSystem === '0' ? '技术中台' : 'JIRA' }}</div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item label="发版周期">
                                    <div v-fitText style="margin-top: -2px; width: 100%">{{ detail.releasePeriodAvgWeeks ? `${detail.releasePeriodAvgWeeks}周` : '不固定' }}</div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="业务方">
                                    <div v-fitText style="margin-top: -2px; width: 100%">{{ detail.businessSide }}</div>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </flexbox>
</template>

<script lang="ts">
import { defineComponent, ref, unref, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const typeTitle = computed(() => {
            const str = props.detail.reportName;
            const index = str.indexOf('年');
            const lastIndex = str.indexOf('报告');
            if (index >= 0) {
                return str.slice(index + 1, lastIndex);
            } else {
                return '';
            }
        });
        return {
            typeTitle
        };
    }
});
</script>

<style scoped lang="less">
.header-info-wrap {
    height: 127px;
    background: #f8f8f9;
    padding: 0 48px 0 24px;
    .header-title {
        font-size: 20px;
        color: #172b4d;
    }
    ::v-deep(.ant-form-item-label) {
        min-width: 0;
    }
    ::v-deep(.ant-form-inline .ant-form-item) {
        margin-bottom: 0 !important;
    }
}
</style>